<template>
	<view class="wrap">
		<u-navbar title="添加每日事项" :is-back="isBack" :background="background"></u-navbar>
		<u-form :model="form" ref="uForm">

			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="order" label-width="120" :label-position="labelPosition"
			 label="事项" v-for="temp in form.list">

				<u-input style="width: 120;" :border="border" placeholder="请输入事项" v-model="temp.item" type="text"></u-input>

				<u-icon name="close" color="#2979ff" size="28" @click="remove(temp)"></u-icon>
			</u-form-item>

			<u-button type="primary" :ripple="true" shape="circle" @click="addItems">添加事项</u-button>

			<u-form-item :label-position="labelPosition" label="总结">
				<u-input type="textarea" :border="border" placeholder="请填写总结" v-model="form.content" />
			</u-form-item>

		</u-form>

		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" :show-title="showTitle" :async-close="asyncClose"
		 @confirm="confirm" :content="content">
		</u-modal>

		<u-button @click="saveOrUpdate">提交</u-button>
		<u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)'
				},
				isBack: false,
				showModal: false,
				zoom: false,
				content: '确认删除这个事项吗',
				contentSlot: false,
				showTitle: true,
				asyncClose: false,
				form: {
					list: [{
						item: ''
					}],
					content: '',
				},
				border: true,
				labelPosition: 'top',
				deleteItem: undefined,
			};
		},
		onHide(){
			console.info("addRecord 页面隐藏了")
			this.form.list = [{
				item: ''
			}]
		},
		onShow() {
			console.info("addRecord 显示了")
			const time = this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd');
			this.getTodayData(time)
		},
		computed: {

		},
		methods: {
			getTodayData(time) {
				const request = {}
				request['time'] = time
				this.$u.post('/record/getByTime', request).then(res => {
					if (res.data.time.length == 0) {
						return;
					}
					const ans = res.data.time[0]
					this.form = ans
					this.form.list = JSON.parse(ans.list)
					console.info(time + "的记录是", ans)
				})
			},
			confirm() {
				console.info("确认删除")
				setTimeout(() => {
					this.show = false;
				}, 2000)
				const list = this.form.list

				let index = -1;
				for (let i = 0; i < list.length; i++) {
					if (list[i] === this.deleteItem) {
						index = i
					}
				}

				if (index != -1) {
					list.splice(index, 1);
				}
				this.form.list = list
				console.info(list)
			},
			remove(temp) {
				console.info("删除事项", temp)
				this.deleteItem = temp
				this.showModal = true
			},
			addItems() {
				console.info("添加事项")
				const item = {}
				this.form.list.push(item)
			},
			saveOrUpdate() {
				if (this.form.id) {
					this.update()
				} else {
					this.save()
				}
			},
			update() {
				console.log('表单的数据', this.form);
				this.form.list = JSON.stringify(this.form.list)
				console.info("更新的数据", this.form)
				this.$u.put('/record/update', this.form).then(res => {
					console.info("提交成功！")
					uni.switchTab({
						url: '/pages/index/index',
					})
				})
			},
			save() {
				console.log('表单的数据', this.form);
				this.form.list = JSON.stringify(this.form.list)
				console.info("保存的数据", this.form)
				this.$u.post('/record/add', this.form).then(res => {
					console.info("提交成功！")
					uni.switchTab({
						url: '/pages/index/index',
					})
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
	}

	.close-btn {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
